<template>
  <div id="entrance" class="entrance has-menu">
    <better-scroll class="better-scroll-page" :pulldown="pulldown" @pulldown="loadData" :data="scrollRefresh">
      <app-transition class="entrance-transition" :name="transitionName">
        <div v-if="isEntrance" key="entrance-index" class="entrance-index">
          <div class="mine-header border-b-1px gradient">
            <div class="mine-avatar-bg-circle" @click="changeAvatarPage">
              <div class="mine-avatar">
                <img :src="userPicture" alt="头像">
              </div>
              <div class="mine-username text-ellipsis">{{userInfo && userInfo.username}}</div>
            </div>
          </div>
          <div class="mine-ingress">
            <mt-cell title="公告" is-link @click.native="goToDetailPage('recharge')">
              <span class="unread-messages">1</span>
              <i slot="icon" class="ion ion-ios-megaphone-outline" aria-hidden="true" style="color: #259e26;"></i>
            </mt-cell>
            <mt-cell title="外勤" is-link @click.native="goToDetailPage('withdraw')">
              <i slot="icon" class="ion ion-ios-pin-outline" aria-hidden="true" style="color: #EB6E3E;"></i>
            </mt-cell>
            <mt-cell title="排班" is-link @click.native="goToDetailPage('balance')">
              <i slot="icon" class="ion ion-ios-calendar-outline" aria-hidden="true" style="color: #86A04E;"></i>
            </mt-cell>
            <mt-cell title="统计" is-link @click.native="goToDetailPage('profile')">
              <i slot="icon" class="ion ion-ios-pie-outline" aria-hidden="true" style="color: #99D9EA;"></i>
            </mt-cell>
            <mt-cell to="/rule" title="工资条" is-link>
              <i slot="icon" class="ion ion-ios-cash-outline" aria-hidden="true" style="color: #EB6E3E;"></i>
            </mt-cell>
            <mt-cell to="/notice" title="员工贷" is-link>
              <i slot="icon" class="ion ion-ios-card" aria-hidden="true" style="color: #84540F;"></i>
            </mt-cell>
          </div>
          <div class="mine-login-login" @click.stop.prevent="login" v-if="!isLoggedIn">
            <mt-cell title="登录" is-link>
              <i slot="icon" class="fa fa-sign-in" aria-hidden="true" style="color: #C8BFE7;"></i>
            </mt-cell>
          </div>
          <div class="mine-login-out" @click.stop.prevent="logout" v-else>
            <mt-cell title="退出" is-link>
              <i slot="icon" class="fa fa-sign-out" aria-hidden="true" style="color: #C8BFE7;"></i>
            </mt-cell>
          </div>
        </div>
        <div v-else key="change-avatar" class="change-avatar">
          <it-header :from="true" @back="changeAvatarPage(-1)" :showAvatar="false" title="更换头像"></it-header>
          <change-avatar-app v-if="cordova" :userPicture="userPicture"></change-avatar-app>
          <change-avatar-h5 v-else :userPicture="userPicture"></change-avatar-h5>
        </div>
      </app-transition>
    </better-scroll>
    <!--退出弹出框-->
    <mt-message-box title="退出" :show="showLogout" cancelText="取消" confirmText="确定" @ok="confirmLogout" @cancel="cancelLogout">
      <p class="text-center">您确定要退出？</p>
    </mt-message-box>
    <mt-message-box :show="showLoginTip" title="提示" cancelText="关闭" confirmText="登录" @ok="login" @cancel="close">
      请先登录
    </mt-message-box>
    <it-menu></it-menu>
  </div>
</template>
<script>
import changeAvatarApp from '../change-avatar/change-avatar-app'
import changeAvatarH5 from '../change-avatar/change-avatar-h5'
import userAvatar from '../../assets/user-avatar.jpg'
import defaultAvatar from '../../assets/default-avatar.jpg'

export default {
  name: 'entrance',
  data() {
    return {
      cordova: !!window.cordova,
      scrollRefresh: 2, // 控制scroll refresh，更换使用随机数，确保该值改变引发scroll refresh
      showLogout: false, // 控制退出的弹框
      pulldown: true,
      showLoginTip: false, // 默认登录弹出框不显示
      isEntrance: true // 切换改变头像
    }
  },
  computed: {
    userInfo: function() {
      return this.$store.state.userInfo
    },
    isLoggedIn() {
      return this.$store.state.isLoggedIn
    },
    userPicture() {
      return this.isLoggedIn ? userAvatar : defaultAvatar
    },
    transitionName() {
      return this.isEntrance ? 'slideOutRight' : 'slideInRight'
    }
  },
  created() {},
  methods: {
    confirmLogout() {
      this.api.logout()
      this.showLogout = false
    },
    cancelLogout() {
      this.showLogout = false
    },
    loadData() {},
    goToDetailPage(routeName) {
      /*if (this.isLoggedIn) {
        it.gotoRouterByName(routeName)
      } else {
        this.showLoginTip = true
      }*/
    },
    login() {
      this.$router.push({ path: 'auth' })
    },
    logout() {
      this.showLogout = true
    },
    close() {
      // this.showLoginTip = false
    },
    /**
     * [changeAvatarPage description]
     * @param  {[Number]} num [-1 is back and else is forward]
     * @return {null}     [no return]
     */
    changeAvatarPage(num) {
      if (num === -1) {
        this.isEntrance = true
        return
      }
      this.isEntrance = false
    }
  },
  components: {
    'change-avatar-app': changeAvatarApp,
    'change-avatar-h5': changeAvatarH5
  }
}

</script>
<style lang="scss" rel="stylesheet/scss">
@import "../../common/scss/variables";

.entrance {
  //background-color: #F4F4F4;
  .mine-header {
    position: relative;
    height: 3.6rem;
    background-color: #5396c5;
    overflow: hidden;
  }
  .gradient {}

  .mine-avatar-ladder-shaped {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 1.8rem;
    border-left: 7.5rem solid #FC6D43; //#d84a4e  rgba(241, 192, 122, 0.12)
    border-bottom: 1rem solid transparent;
    box-sizing: content-box;
  }
  .mine-avatar-bg-circle,
  .mine-avatar-half-circle {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
    border-radius: 50%;
    box-sizing: border-box;
  }
  .mine-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1.5rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-sizing: border-box;
  }
  .mine-avatar-bg-circle {
    background-color: #DCDDE6;
  }
  .mine-avatar-half-circle {
    top: 2.4rem;
    width: 15.5rem;
    height: 18.5rem;
    transform: translateX(-50%);
    background-color: #fff;
  }
  .mine-avatar {
    width: 1.3rem;
    height: 1.3rem;
    border: 3px solid #fff;
    box-shadow: 0 0 2px 2px #d9d9d9;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .mine-username {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.4rem;
    line-height: 1.5rem;
    padding: 0 2rem;
  }
  .mine-emphasis {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.78rem;
  }
  .mine-emphasis-list {
    display: inline-block;
    width: 49%;
    height: 100%;
    line-height: 0.78rem; //font-size: 0.26rem;
    text-align: center;
  }

  .mine-ingress {
    margin: 0.24rem 0;
  }
  .mine-login-out {
    padding-bottom: 0.72rem;
    margin-bottom: 61px;
  }
  .unread-messages {
    min-width: 18px;
    padding: 0 4px;
    font-size: 14px;
    line-height: 18px;
    color: #fff;
    background-color: #B42020;
    border-radius: 9px;
    text-align: center;
  }
}

.entrance-transition {
  position: relative;
  width: 100%;
  height: 100%;
}
.entrance-index,
.change-avatar {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* .change-avatar {
  background-color: red;
} */

</style>
